<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" @click="handleCloud">云存储配置</el-button>
        <el-button type="primary" @click="handleUploadFile">上传文件</el-button>
        <el-button type="danger" class="handle-del" @click="delAllSelection"
          >删除</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="url"
          align="center"
          label="URL地址"
        ></el-table-column>

        <el-table-column
          sortable
          prop="createDate"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30]"
          @size-change="handleSizeChange"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 云存储配置弹出框 -->
    <el-dialog title="云存储配置" :visible.sync="cloudVisable" width="50%">
      <el-form ref="form" :model="cloudForm" label-width="auto" :rules="rules">
        <el-form-item label="类型">
          <template>
            <el-radio-group @change="handleRadioLabel" v-model="cloudForm.type">
              <el-radio :label="1">七牛</el-radio>
              <el-radio :label="2">阿里云</el-radio>
              <el-radio :label="3">腾讯云</el-radio>
              <el-radio :label="4">FastDFS</el-radio>
              <el-radio :label="5">本地上传</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <!-- 七牛云 -->
        <div v-if="cloudForm.inputVisable === 1">
          <el-form-item label="域名" prop="qiniuDomain">
            <el-input
              placeholder="七牛绑定的域名"
              v-model="cloudForm.qiniuDomain"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="路径前缀">
            <el-input
              placeholder="不设置默认为空"
              v-model="cloudForm.qiniuPrefix"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKey" prop="qiniuAccessKey">
            <el-input
              placeholder="七牛AccessKey"
              v-model="cloudForm.qiniuAccessKey"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="SecretKey" prop="qiniuSecretKey">
            <el-input
              placeholder="七牛SecretKey"
              v-model="cloudForm.qiniuSecretKey"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="空间名" prop="qiniuBucketName">
            <el-input
              placeholder="七牛存储空间名"
              v-model="cloudForm.qiniuBucketName"
              clearable
            ></el-input>
          </el-form-item>
        </div>

        <!-- 阿里云 -->
        <div v-if="cloudForm.inputVisable === 2">
          <el-form-item label="域名" prop="aliyunDomain">
            <el-input
              placeholder="阿里云绑定的域名, 如: http://cdn.sound.io"
              v-model="cloudForm.aliyunDomain"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="路径前缀">
            <el-input
              placeholder="不设置默认为空"
              v-model="cloudForm.aliyunPrefix"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="EndPoint" prop="aliyunEndPoint">
            <el-input
              placeholder="阿里云EndPoint"
              v-model="cloudForm.aliyunEndPoint"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKeyId" prop="aliyunAccessKeyId">
            <el-input
              placeholder="阿里云AccessKeyId"
              v-model="cloudForm.aliyunAccessKeyId"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="AccessKeySecret" prop="aliyunAccessKeySecret">
            <el-input
              placeholder="阿里云AccessKeySecret"
              v-model="cloudForm.aliyunAccessKeySecret"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="BucketName" prop="aliyunBucketName">
            <el-input
              placeholder="阿里云BucketName"
              v-model="cloudForm.aliyunBucketName"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <!-- 腾讯云 -->
        <div v-if="cloudForm.inputVisable === 3">
          <el-form-item label="域名" prop="qcloudDomain">
            <el-input
              placeholder="腾讯云绑定的域名"
              v-model="cloudForm.qcloudDomain"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="路径前缀">
            <el-input
              placeholder="不设置默认为空"
              v-model="cloudForm.qcloudPrefix"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="AppId" prop="qcloudAppId">
            <el-input
              placeholder="腾讯云AppId"
              v-model="cloudForm.qcloudAppId"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="SecretId" prop="qcloudSecretId">
            <el-input
              placeholder="腾讯云SecretId"
              v-model="cloudForm.qcloudSecretId"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="SecretKey" prop="qcloudSecretKey">
            <el-input
              placeholder="腾讯云SecretKey"
              v-model="cloudForm.qcloudSecretKey"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="BucketName" prop="qcloudBucketName">
            <el-input
              placeholder="腾讯云BucketName"
              v-model="cloudForm.qcloudBucketName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="所属地区" prop="qcloudRegion">
            <template>
              <el-select
                style="width: 100%"
                v-model="cloudForm.value"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in cloudForm.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </div>

        <!-- FastDFS -->
        <div v-if="cloudForm.inputVisable === 4">
          <el-form-item label="域名" prop="fastdfsDomain">
            <el-input
              placeholder="绑定的域名, 如: http://cdn.sound.io"
              v-model="cloudForm.fastdfsDomain"
              clearable
            ></el-input>
          </el-form-item>
        </div>
        <!-- 本地上传 -->
        <div v-if="cloudForm.inputVisable === 5">
          <el-form-item label="域名" prop="localDomain">
            <el-input
              placeholder="绑定的域名, 如: http://cdn.sound.io"
              v-model="cloudForm.localDomain"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="路径前缀">
            <el-input
              placeholder="不设置默认为空"
              v-model="cloudForm.localPrefix"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="存储目录" prop="localPath">
            <el-input
              placeholder="如: D:/upload"
              v-model="cloudForm.localPath"
              clearable
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cloudVisable = false">取 消</el-button>
        <el-button type="primary" @click="saveCloud">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 上传文件弹出框 -->
    <el-dialog title="上传文件" :visible.sync="uploadFileVisable" width="50%">
      <el-form ref="uploadFileForm" :model="uploadFileForm" label-width="auto">
        <el-form-item label="">
          <el-upload
            class="upload-demo"
            drag
            :action="`/sys/oss/upload?token=${url}`"
            multiple
            :on-success="onSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ossOssMixin } from "common/js/systemSettings";
import util from "utils/util";
export default {
  name: "ossoss",
  mixins: [ossOssMixin],
  created() {
    // 唯独这个不走反向代理
    this.getOOData({});
  },
  methods: {
    // 上传文件
    handleUploadFile() {
      this.uploadFileVisable = true;
    },
    onSuccess(response, file, fileList) {
      if (response.code !== 0) {
        return this.$message.error(response.msg);
      }
      this.$message.success("上传文件成功");
    },
    getToken(token) {
      var arr = token.split(";");
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].split("=")[0].trim() === "token") {
          return arr[i].split("=")[1];
        }
      }
    },
    // 单选
    handleRadioLabel(label) {
      this.cloudForm.inputVisable = label;
      this.cloudForm.type = label;
    },
    // 云存储配置
    handleCloud() {
      this.cloudVisable = true;
      // 初始化云存储表单
      this.$axios
        .get("/sys/oss/info", {
          params: {
            _t: Date.now()
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return;
          }
          for (var key in res.data) {
            this.cloudForm[key] = res.data[key];
          }
        })
        .catch(() => {});
    },
    saveCloud() {
      this.$axios
        .post("/sys/oss", {
          type: this.cloudForm.type,
          qiniuDomain: this.cloudForm.qiniuDomain,
          qiniuPrefix: this.cloudForm.qiniuPrefix,
          qiniuAccessKey: this.cloudForm.qiniuAccessKey,
          qiniuSecretKey: this.cloudForm.qiniuSecretKey,
          qiniuBucketName: this.cloudForm.qiniuBucketName,
          aliyunDomain: this.cloudForm.aliyunDomain,
          aliyunPrefix: this.cloudForm.aliyunPrefix,
          aliyunEndPoint: this.cloudForm.aliyunEndPoint,
          aliyunAccessKeyId: this.cloudForm.aliyunAccessKeyId,
          aliyunAccessKeySecret: this.cloudForm.aliyunAccessKeySecret,
          aliyunBucketName: this.cloudForm.aliyunBucketName,
          qcloudDomain: this.cloudForm.qcloudDomain,
          qcloudPrefix: this.cloudForm.qcloudPrefix,
          qcloudAppId: this.cloudForm.qcloudAppId,
          qcloudSecretId: this.cloudForm.qcloudSecretId,
          qcloudSecretKey: this.cloudForm.qcloudSecretKey,
          qcloudBucketName: this.cloudForm.qcloudBucketName,
          qcloudRegion: this.cloudForm.qcloudRegion,
          fastdfsDomain: this.cloudForm.fastdfsDomain,
          localDomain: this.cloudForm.localDomain,
          localPrefix: this.cloudForm.localPrefix,
          localPath: this.cloudForm.localPath
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return;
          }
          this.$message.success("操作成功");
          this.cloudVisable = false;
        })
        .catch(() => {});
    },
    // 表头排序
    sortChange({ column, prop, order }) {
      prop = prop === "createDate" ? "create_date" : prop;
      this.$set(this.query, "orderField", prop);
      if (order === "ascending") {
        this.$set(this.query, "order", order.substr(0, 3));
        this.getOOData({});
      } else if (order === "descending") {
        this.$set(this.query, "order", order.substr(0, 4));
        this.getOOData({});
      }
    },
    // 删除操作
    handleDelete(index, row) {
      this.ids[0] = row.id;
      util.delete.call(this, "/sys/oss", index, this.ids, this.getOOData);
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      var ids = this.multipleSelection.map(item => {
        return item.id;
      });
      util.delete.call(this, "/sys/oss", "", ids, this.getOOData);
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getOOData({});
    },
    handleSizeChange(val) {
      this.$set(this.query, "pageSize", val);
      this.getOOData({});
    }
  }
};
</script>

<style scoped>
@import url("../../common/css/index.css");
</style>
